<template>
	<div class="sidebar">
		<el-menu
			class="sidebar-el-menu"
			:default-active="onRoutes"
			:collapse="sidebar.collapse"
			background-color="#00CC00"
			text-color="white"
			active-text-color="white"
			unique-opened
			router
		>
			<!--background-color="#00a854"-->
			<template v-for="item in items" class="navigation">
				<template v-if="item.subs" >
					<el-sub-menu :index="item.index" :key="item.index" v-permiss="item.permiss" >
						<template #title>
							<el-icon >
								<component :is="item.icon"></component>
							</el-icon>
							<span>{{ item.title }}</span>
						</template>
						<template v-for="subItem in item.subs">
							<el-sub-menu
								v-if="subItem.subs"
								:index="subItem.index"
								:key="subItem.index"
								v-permiss="item.permiss"
							>
								<template #title >{{ subItem.title }}</template>
								<el-menu-item v-for="(threeItem, i) in subItem.subs" :key="i" :index="threeItem.index" >
									{{ threeItem.title }}
								</el-menu-item>
							</el-sub-menu>
							<el-menu-item v-else :index="subItem.index" v-permiss="item.permiss">
								{{ subItem.title }}
							</el-menu-item>
						</template>
					</el-sub-menu>
				</template>
				<template v-else>
					<el-menu-item :index="item.index" :key="item.index" v-permiss="item.permiss">
						<el-icon>
							<component :is="item.icon"></component>
						</el-icon>
						<template #title>{{ item.title }}</template>
					</el-menu-item>
				</template>
			</template>
		</el-menu>
	</div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useSidebarStore } from '../store/sidebar';
import { useRoute } from 'vue-router';


const items = [
	{
		icon: 'Odometer',
		index: '/dashboard',
		title: '系统首页',
		permiss: '1'
	},
	{
		icon: 'User',
		index: '/table_employee',
		title: '人员管理',
		permiss: '2'
	},
	{
		icon: 'Goods',
		index: '/table_jy',
		title: '卷烟信息管理',
		permiss: '3'
	},
	{
		icon: 'Shop',
		index: '/table_wd',
		title: '烟草网点管理',
		permiss: '4'
	},
	{
		icon: 'collection',
		index: '/table_rule',
		title: '处罚条例管理',
		permiss: '5'
	},
	{
		icon: 'Document',
		index: '/table_history',
		title: '历史案件',
		permiss: '6'
	},
  {
    icon: 'Document',
    index: '/table_ocr',
    title: '扫描纸质文档',
    permiss: '7'
  },
  {
    icon: 'files',
    index: '/table_process',
    title: '审核管理',
    permiss: '8'
  },
	//
	// {
	// 	icon: 'Document',
	// 	index: '/table_delivery_channel',
	// 	title: '寄递渠道涉烟信息管理',
	// 	permiss: '32'
	// },
	{
		icon: 'files',
		index: '/table_analysis',
		title: '案件分析',
		permiss: '1'
	},
	{
		icon: 'files',
		index: '/table_analysis_tree',
		title: '案件分析树形图',
		permiss: '1'
	},
	{
		icon: 'files',
		index: '/table_analysis_radar',
		title: '案件分析雷达图',
		permiss: '1'
	},
  {
    icon: 'files',
    index: '/evidence',
    title: '现场相关证据管理',
	  permiss: '9',
    subs:[
      {
        icon: 'files',
        index: '/evidence_image',
        title: '证据照片管理',
        permiss: '10'
      },
      {
        icon: 'Document',
        index: '/table_evidence',
        title: '证据先行保存通知书管理',
        permiss: '11'
      },
      {
        icon: 'Document',
        index: '/table_record',
        title: '勘验笔录管理',
        permiss: '13'
      },
      {
        icon: 'Document',
        index: '/table_cigCode',
        title: '卷烟喷码管理',
        permiss: '14'
      },
    ]
  },
  {
    icon: 'files',
    index: '/table_reports',
    title: '文档报表管理',
	permiss: '15',
    subs:[
      {
        icon: 'Document',
        index: '/table_report',
        title: '立案报告表管理',
        permiss: '16'
      },
      {
        icon: 'Document',
        index: '/table_identify',
        title: '卷烟鉴别管理',
        permiss: '19'
      },
      {
        icon: 'Document',
        index: '/table_cigPrice',
        title: '涉案烟草核价表管理',
        permiss: '20'
      },
      {
        icon: 'Document',
        index: '/table_inquiry_record',
        title: '询问笔录管理',
        permiss: '21'
      },
      {
        icon: 'Document',
        index: '/table_end_report',
        title: '调查终结文书管理',
        permiss: '22'
      },

    ]
  },
	{
		icon: 'files',
		index: '/discuss_hear',
		title: '讨论听证管理',
		permiss: '23',
		subs:[
			{
				icon: 'Document',
				index: '/table_group_discussion',
				title: '集体讨论',
				permiss: '24'
			},
			{
				icon: 'Document',
				index: '/table_hear_notice',
				title: '听证告知书',
				permiss: '25'
			},
		]
	},
  {
    icon: 'files',
    index: '/table_punish',
    title: '案件处理管理',
	  permiss: '26',
    subs: [
		{
			icon: 'Document',
			index: '/table_case_handle',
			title: '案件处理审批管理',
			permiss: '27'
		},
      {
        icon: 'Document',
        index: '/table_advance_penalty',
        title: '行政处罚事先告知书',
        permiss: '28'
      },
      {
        icon: 'Document',
        index: '/table_punish_decision',
        title: '行政处罚决定书',
        permiss: '29'
      },
      {
        icon: 'Document',
        index: '/table_administrative_fine',
        title: '行政罚款收据',
		permiss: '30'
      },
		{
			icon: 'Document',
			index: '/table_final_report',
			title: '结案报告表管理',
			permiss: '31'
		},
		{
			icon: 'Document',
			index: '/table_archive_file',
			title: '归档管理',
			permiss: '32'
		}
    ]

  }



];

const route = useRoute();
const onRoutes = computed(() => {
	return route.path;
});

const sidebar = useSidebarStore();
</script>

<style scoped>
.sidebar {
	display: block;
	position: absolute;
	left: 0;
	width: 16.5%;
	/*height: 100%;*/
	top: 9.6%;
	bottom: 0;
	overflow-y: scroll;
}

.sidebar::-webkit-scrollbar {
	width:0%;
}
.sidebar-el-menu:not(.el-menu--collapse) {
	width: 100%;
	background-image: url(../assets/img/background2.png);
}

/*.sidebar-el-menu {*/
/*	background: url(../assets/img/1.png);*/
/*	background-repeat: no-repeat;*/
/*	background-size: cover;*/
/*}*/
/*.el-sub-menu:not(.el-menu--collapse) {*/
/*	color: #00a854;*/
/*}*/

/*.navigation:not(.el-menu--collapse) {*/
/*	color: #20a0ff !important;*/
/*	background-color: #2c394c !important;*/
/*}*/

.sidebar > ul {
	height: 100%;
}


</style>
